<template>
  <div class="v-eqpt-model">
    <c-row-search>
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <el-form-item prop="keywordSearch">
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="search"
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
          <el-button @click="reset">
            {{ multLang('btn_rst_a') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <c-popover-form>
            <el-form :model="popperForm" ref="popperForm" label-width="128px">
              <c-row :col="6">
                <c-col>
                  <el-form-item
                    :label="multLang('title_asset_c')"
                    prop="categorySearch"
                  >
                    <c-cascader
                      v-model="popperForm.categorySearch"
                      multiple
                      clearable
                      :options="assetTypeAllTree"
                      :placeholder="tplLang('text_choose_a', ['title_asset_c'])"
                    ></c-cascader>
                  </el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_mfr_a', ':')"
                    prop="orgSearch"
                  >
                    <c-mult-select
                      v-model="popperForm.orgSearch"
                      :options="manufacturerList"
                      :placeholder="tplLang('text_choose_a', ['title_mfr_a'])"
                    ></c-mult-select>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-popover-form>
        </el-form-item>
      </el-form>
      <template #right>
        <el-button
          type="primary"
          @click="$router.push({ name: Routes.EqptModelAdd })"
        >
          <c-icon name="plus"></c-icon>

          {{ multLang('btn_new_a') }}
        </el-button>
        <c-select-more @command="moreActions">
          <el-button type="primary">
            {{ multLang('btn_more_a') }}
            <c-icon name="down"></c-icon>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="exportSelect">
              {{ multLang('btn_export_a') }}
            </el-dropdown-item>

            <el-dropdown-item command="exportAll">
              {{ multLang('btn_export_b') }}
            </el-dropdown-item>

            <el-dropdown-item command="inport">
              {{ multLang('btn_import_b', 'title_dd') }}
            </el-dropdown-item>

            <el-dropdown-item command="batchDel">
              {{ multLang('text_ap') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </c-select-more>
      </template>
    </c-row-search>
    <c-table-page
      class="v-eqpt-model-table"
      :data="table.data"
      :col="col"
      :vol="table.vol"
      select
      @select-change="table.select = $event"
      :total="page.total"
      :page.sync="page.current"
      :size.sync="page.size"
      @page-change="pageChange"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>

        <el-button type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
      <!-- <template #opn>
        <el-table-column width="200px" fixed="right" align="center">
          <template slot="header" slot-scope="{}">
            {{ multLang('title_action_a') }}
          </template>
          <div slot-scope="{ row }" style="text-align: center">
            <el-button type="text" @click="edit(row)">
              <c-icon name="edit"></c-icon>
              <span>
                {{ multLang('btn_edit_a') }}
              </span>
            </el-button>

            <el-button type="text" @click="del(row)">
              <c-icon name="delete"></c-icon>
              <span>
                {{ multLang('btn_delete_a') }}
              </span>
            </el-button>
          </div>
        </el-table-column>
      </template> -->
    </c-table-page>
  </div>
</template>
<script>
import { Routes } from '@vue/router/routes'
import { delAssetModel, getAssetModel } from '@api/eqpt-model'
import { toRoute } from '@/util/router'
export default {
  name: 'VEqptModel',
  components: {},
  props: {},
  data() {
    return {
      Routes,
      form: {
        keywordSearch: ''
      },
      popperForm: {
        categorySearch: [],
        orgSearch: []
      },
      page: {
        total: 0,
        current: 1,
        size: 20
      },
      table: {
        select: '',
        click: {},
        data: [],
        vol: [
          { key: 'title_asset_d', val: true },
          { key: 'title_asset_c', val: true },
          { key: 'title_mfr_a', val: true },
          { key: 'title_created_a', val: true }
        ]
      }
    }
  },
  computed: {
    assetTypeAllTree() {
      return this.optionTree('asset_type_all')
    },
    manufacturerList() {
      return this.optionList('manufacturer')
    },
    col() {
      return [
        {
          label: 'title_asset_d',
          prop: 'model_name',
          // fixed: 'left',
          route: {
            auth: true,
            name: Routes.EqptModelView
          }
        },
        { label: 'title_asset_c', prop: 'category_name' },
        { label: 'title_mfr_a', prop: 'title' },
        { label: 'title_created_a', prop: 'create_time' }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'asset_type_all' })
    this.setOption({ key: 'manufacturer' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {
    const { close } = this.$route.params
    close && this.reset()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    reset() {
      this.$refs.popperForm.resetFields()
    },
    search() {
      this.page.current = 1
      this.query()
    },
    query() {
      getAssetModel({
        pageNumber: this.page.current,
        pageSize: this.page.size,
        ...this.form,
        ...this.popperForm
      }).then(({ data }) => {
        if (data) {
          this.table.data = data.rows || []
          this.page.total = data.total
        }
      })
    },
    pageChange() {
      this.query()
    },
    selectChange(ids) {
      this.table.select = ids
    },
    inport() {},
    batchDel() {
      this.delAssetModel(this.table.select)
    },
    moreActions(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    edit(row) {
      const { id } = row || {}
      toRoute(Routes.EqptModelView, {
        params: { id, edit: true }
      })
    },
    del(row) {
      const { id } = row || {}
      this.delAssetModel(id)
    },
    delAssetModel(ids) {
      if (!ids) return
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_asset_d']),
        this.multLang('btn_delete_a', 'title_asset_d'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        delAssetModel({
          ids
        }).then(() => {
          this.query()
        })
      })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .v-eqpt-model {
    &-table {
      height: calc(100% - 66px);
      overflow: hidden;
    }
  }
}
</style>
